<template>
    <div id="authManage">
      
         <el-table :data="tableData" border  style="width: 100%">
            <el-table-column v-for="col in tableCols" :key="col.id"  :prop="col.prop"
            :label="col.label">
            </el-table-column>
            <el-table-column  label="操作"  align="center" width="172">
                <template slot-scope="scope">
                  <el-button type="text" size="normally"  @click="getAuthRoleInfo(scope.row)">编辑赋权角色</el-button>
                </template>
              </el-table-column>
        </el-table>
        
        <el-pagination class="pageinfo" background layout="prev, pager, next" limit='10'
         @current-change='changeCurrentPage'
          :total="totals">
        </el-pagination>

         <el-dialog title="编辑赋权角色" :visible.sync="dialogVisible" width="30%" center>
            <el-table :data="jueseTable">
                <el-table-column prop="name" label="已赋权角色"></el-table-column>
                <el-table-column>
                <template slot-scope="scope">
                    <el-button type="text" size="normally" @click="deleteRole(scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-row style="margin-top:8px;">
                <el-col :span="12">
                <el-select v-model="roleSelected" placeholder="请选择角色">
                    <el-option v-for="role in selectroles" :key="role.id" :label="role.name" :value="role.id"></el-option>
                </el-select>
                </el-col>
                <el-col :span="12">
                <el-button type="text" size="normally" @click="addRole()">添加</el-button>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">关闭</el-button>
            </span>
            </el-dialog>
    </div>
 
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableCols: [
            {id: 1, prop: 'no', label: '栏目编号'}, {id: 2, prop: 'name', label: '栏目名称'}, {id: 3, prop: 'parentName', label: '父栏目'},
            {id: 4, prop: 'roleName', label: '已赋权角色'}
        ],
        dialogVisible: false,
        jueseTable: [],
        roleSelected: '',
        selectroles: [],
        currentPage: 1,
        totals: 0,
        mId: ''
      }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        addRole() {
            if (!this.roleSelected) {
                this.$message({message: '请您选择角色',type: 'warning'});
                return false;
            }
            let param = {roleId: this.roleSelected,menuId: this.mId}
            this.$api.apiGiveAuth(param, res => {
                this.$message({
                    type: 'success',
                    message: '添加成功'
                })
                this.roleSelected = ''
                let param = {
                    menuId: this.mId
                }
                this.$api.apiGetAuthInfo(param, res => {
                    this.jueseTable = res.data.inRole
                    this.selectroles = res.data.outRole
                })
            })
        },
        deleteRole(row) {

            let param = {
                id: row.roleMenuId
            }
            this.$api.apiDelMenuAuth(param, res => {
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
                this.roleSelected = ''
                let param = {
                    menuId: this.mId
                }
                this.$api.apiGetAuthInfo(param, res => {
                    this.jueseTable = res.data.inRole
                    this.selectroles = res.data.outRole
                })
            })
        },
        close: function () {
            this.getTableData();
            this.dialogVisible = false;
        },
        getTableData() {
            let param = {
                page: this.currentPage,
                limit: 10
            }
            this.$api.apiGetAuthList(param, res => {
                this.tableData = res.data
                //this.totals = res.pageInfo.total
            })
        },
        getAuthRoleInfo(row) {
            this.dialogVisible = true
            this.mId = row.id
            let param = {
                menuId: row.id
            }
            this.$api.apiGetAuthInfo(param, res => {
                this.jueseTable = res.data.inRole
                this.selectroles = res.data.outRole
            })
        },
        changeCurrentPage(page) {
          this.currentPage = page
          this.getTableData()
        },
    }
  }
</script>
<style lang="scss">
#authManage {
    .topi {
        display: flex;
        width: 80%;
        margin-bottom: 20px;
        .el-input {
            width: 40%;
            margin-left: 30px;
            margin-right: 100px
        }
    }
}
    
</style>
